<template>
  <div>
    <button @click="toggle">点击变色</button>
    <h1 v-color="color">大海啊，全是水</h1>
    <h1 v-color="'tomato'">夏天啊，全是腿</h1>
  </div>
</template>

<script>
export default {
data(){
  return{
    color:"skyblue"
  }
} ,
methods:{
  toggle(){
    if(this.color=="skyblue"){
      this.color="yellow"
    }else{
      this.color="skyblue"
    }
  }
},
directives:{
  // color:{
  //   bind(el,binding){
  //     console.log(el,binding)
  //     el.style.color=binding.value
  //   },
  //   update(el,binding){
  //     el.style.color=binding.value
  //   }
  // }
  // 简写方式， 
  color(el,binding){
    el.style.color=binding.value
  }
}
}
</script>

<style>

</style>